<template>
	<div id="box">
		<header>
		<ul>
		    <li @click="fanhui"><img src="../assets/img/fanhui2.png"></li>
		    <li>我的红包</li>
			<li>红包兑换</li>
		</ul>	
	</header>
	<section>
	  <div class="menu">
	  	<ul>
			<li>可使用</li>
			<li>已失效</li>
		</ul>
		<div class="menu_big">
			<div class="menu_one">
				<ol>
					<li><img src="../assets/img/zhongjiang.png"></li>
					<li>你还没有红包</li>
					<li><button>立即一购</button></li>
				</ol>
			</div>
			<div class="menu_two">
				<ol>
					<li><img src="../assets/img/zhongjiang.png"></li>
					<li>你没有红包</li>
					<li><button>立即一购</button></li>
				</ol>
			</div>
		</div>
	  </div>
		
	</section>
	</div>
</template>

<script>
  import".././assets/js/jquery-1.12.4.min.js"
export default {
  name: 'box',
 methods:{
      fanhui(){
      	this.$router.go(-1);
      }
 }
}
$(function(){
	$(".menu ul li").click(function(){
		var index=$(this).index();
		$(this).addClass("active").siblings().removeClass('active');
		$(".menu_big div").eq(index).show().siblings().hide()
	});
	
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
 @import ".././assets/less/wodehongbao.less";
   @import ".././assets/css/reset.css";
</style>